Animated Logo

Introduction

Hello! Welcome to my first ever blog post! As I continue to learn new things and expand my coding skill set, I hope to document my journey, and maybe even earn a few laughs, through my blog. But first and foremost, this blog post is all about one of my favorite elements of this site: my logo. I originally created my logo in Adobe Express and uploaded it as a PNG file into my website’s navbar.

Inspiration

I would like to start by giving credit to Ella Kaye’s blog post detailing how she animated her Quarto website logo. This was the main inspiration behind my efforts to animate my logo and her source code was extremely helpful along the way. I recommending checking out her post for a more in-depth explanation.

Using HTML in YAML

Now working from Ella Kaye’s source code, I began by editing the navbar title specified in my site’s _quarto.yml file. I used a combination of HTML <span> tags and classes that I could apply CSS styling to: SHELBY<span class='icon-line'></span>LEVEL. However, I quickly realized that my last name needed some extra styling to achieve the effect I was going for. The letter V needed to have its own class

Working from Ella’s code, and then used a second line icon-line2 matching the navbar background color above the letter V in my last name.

website:
  title: "Shelby Level"
  navbar:
    title: "<span class='first-name'>SHELBY</span><span class='icon-line' ></span><span class ='icon-line2'></span><span class='last-name'>LE</span><span class='v'>v</span><span class='last-name2'>EL</span>"

Adding Styling to the Static Logo

.icon-line {
  display: block;
  background: $primary;
  width: 100%;
  height: 6px;
  margin: auto;
  display: table;
  margin-top: -6px;
  margin-bottom: -6px;
}

$pink:      #D4006A;
$primary:   $pink !default;

and similarly in ek-theme-dark.scss:

$green:     #00D46A;
$primary:   $green !default;

Animating the Logo Using CSS

.navbar-title:hover > .icon-line {
  animation-duration: 600ms;
  animation-name: line-expand;
}

@keyframes line-expand {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}

format:
  html:
    theme: 
      light: assets/ek-theme-light.scss
      dark: assets/ek-theme-dark.scss
    css: assets/ek-styles.css